import Vue from 'vue'
import VueRouter from 'vue-router'

import HeaderView from "@/layout/HeaderView.vue";
import FooterView from "@/layout/FooterView.vue";

import HomeView from '../views/Home'
import ListView from '../views/List'
import DetailView from '../views/Detail'
import DetailCopyView from '../views/DetailCopy'
import CarView from '../views/Car'
import MineView from '../views/Mine'
import LoginView from '../views/Login'

Vue.use(VueRouter)


// 解决报错
const originalPush = VueRouter.prototype.push
const originalReplace = VueRouter.prototype.replace
// 针对 push 方法
VueRouter.prototype.push = function push (location, onResolve, onReject) {
  if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
  return originalPush.call(this, location).catch(err => err)
}
// 针对 replace 方法
VueRouter.prototype.replace = function push (location, onResolve, onReject) {
  if (onResolve || onReject) return originalReplace.call(this, location, onResolve, onReject)
  return originalReplace.call(this, location).catch(err => err)
}


// 项目入口重定向
// 老项目的主页面     http://localhost:8080/#/   (项目可能已经上线很长事件 => )
// 项目维护后主页面:  http://localhost:8080/#/home

// 可以将老项目的路由地址 => 重定向到新项目入口地址


// 定义路由的时候可以配置 meta 字段  => 在当前路由配置中存储一些信息 => 对应路由地址访问页面时,可以被对应的组件通过$route访问


const routes = [
  // 如果访问 /  => 重定向到 /home  => 最终还是访问 /home
  // {
  //   path:"/",
  //   redirect:"/home"
  // },

  // 别名:  用户通过别名对应的路由路径访问时,展示相同的视图
  // {
  //   path: '/',
  //   name: 'root',
  //   component: HomeView
  // },
  {
    path: '/',
    name: 'home',
    alias:"/home", // 如果访问路由地址是 /home => 也是展示HomeView视图
    // component: HomeView, // 默认将HomeView 展示到default命名视图中
    meta:{ label:"主页", isBack:false},
    components:{
      header:HeaderView,
      default:HomeView,
      footer:FooterView
    }
  },
  {
    path: '/list',
    name: 'list',  // 命名路由 => 可以通过name属性访问路由视图
    // component: ListView
    meta:{ label:"列表页", isBack:true},
    components:{
      header:HeaderView,
      default:ListView,
    }
  },
  {
    path: '/detail',
    name: 'detail',  // 命名路由 => 可以通过name属性访问路由视图
    // component: DetailView,
    meta:{ label:"详情页", isBack:true,isRequireAuth:true},
    components:{
      header:HeaderView,
      default:DetailView,
    },
    // 当用户访问详情页时进行拦截
    // beforeEnter:function(to,form,next){
    //   console.log("组件内独享守卫:from",to);
    //   console.log("组件内独享守卫:to",to);
    //   next();
    // }

  },
  {
    // 配置动态路径参数 以冒号开头
    // 将参数拼接在路径中传入
    // 1. 路由中的设置路径: path: '/detailcopy/:gid/:a/:b',
    // 2. url跳转路径(传入实际值): /detailcopy/A001/1/2
    // 3. Vue-router会对应路径解析得到数据 => {gid:"A001",a:1,b:2}

    path: '/detailcopy/:gid/:a/:b',
    name: 'detailcopy',  // 命名路由 => 可以通过name属性访问路由视图
    component: DetailCopyView
  },
  {
    path: '/car',
    name: 'car',  // 命名路由 => 可以通过name属性访问路由视图
    component: CarView
  },
  {
    path: '/mine',
    name: 'mine',  // 命名路由 => 可以通过name属性访问路由视图
    component: MineView
  },
  {
    path: '/login',
    // component: LoginView,
    // meta:{ label:"登录页", isBack:true},
    components:{
      header:HeaderView,
      default:LoginView,
    },

    // 注意:
    // 子路由配置过程中,如果没有以/开头, 此时path中的路径名称默认会作为长层路由的子路由配置
    // 子路由配置过程中,如果以/开头, 需要从/开始补全当前路由配置
    children:[{
        path:"",  // /login  
        name:"login",
        redirect:"account",
        // component:()=> import(/* webpackChunkName: "about" */ '../views/Login/AccountLogin'), //  当访问父级路由时=> 默认展示哪个视图
    },{
      path:"account",  // /login/account
      name:"accountLogin",
      meta:{ label:"账号登录", isBack:true},
      component:()=> import(/* webpackChunkName: "login" */ '../views/Login/AccountLogin')
    },{
      path:"/login/phone",  // /login/phone
      name:"phoneLogin",
      meta:{ label:"手机登录", isBack:true},
      component:()=> import(/* webpackChunkName: "login" */ '../views/Login/PhoneLogin')
    }]
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About/index.vue')
  },

  // 匹配所有路由和配置404   => 此写法错误路由路径依旧会展示出来
  // {
  //   path:"*",  // vue2 => 匹配所有路由,    => 当使用一个通配符时，$route.params 内会自动添加一个名为 pathMatch 参数。它包含了 URL 通过通配符被匹配的部分：
  //   name:"notfound",
  //   component: () => import(/* webpackChunkName: "about" */ '../views/NotFound'),
  // },
   {
    path:"/404", 
    name:"notfound",
    component: () => import(/* webpackChunkName: "404" */ '../views/NotFound'),
  },

  // 如果访问路由路径找不到 => 跳转至/404
  {
    path:"*",  // vue2 => 匹配所有路由,
    // redirect:"/404",  //  通过path路径跳转
    // redirect:{name:'notfound',query:{wd:"123123"}}   // 设置对象 
    redirect:function(from){
      console.log("from",from); // * 匹配的路由信息(可以知道跳转/404之前的错误路径 )
      return {name:"notfound",query:{wd:from.params.pathMatch}}
    }
  }
]

// 创建路由实例 
const router = new VueRouter({
  mode: 'hash',
  // mode: 'history',
  base: process.env.BASE_URL,
  routes
})






// 全局前置守卫  => 每次导航跳转(路由切换)时,会依次经过每一个钩子函数(中间件)


// router.beforeEach((to,from,next){})   全局前置守卫

// 回调函数有三个参数   
// to =>  : 即将要进入的目标 路由对象 (准备跳转的路由  => 路由相关信息)
// from => 当前导航正要离开的路由 (从那个路由离开 => 路由相关信息)
// next
//      next()  => 执行管道(中间件)下一个钩子函数,  => 如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
//      next(false)  =>  中断当前的导航 (路由地址不在切换)。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址(如果已经切换 => 重置到之前的地址)
//      next("/xxxx") 或 next({name:"xxx",path:xxx,query,params})  next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航  => 进行重定向


// 全局解析守卫 =>  router.beforeResolve 用法同全局前置守卫   router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用。
// 注意: 用法同全局前置守卫,触发阶段靠后 => 它是导航跳转前的最后一道守卫

// router.beforeResolve((to,from,next){})  

// 全局后置钩子  => router.afterEach((to,from){})   没有next参数,不能影响导航跳转  => 
// 常用于埋点(数据统计)
// 用户访问统计(一天之内访问页面的用户数量  新增访问 新访客比率  /  拼多多访问任务)
// 用户行为统计(用户行为分析包含页面点击量、用户点击流、用户访问路径、用户点击热力图、用户转化率、导流转化率)


// 路由独享守卫:
// 




// function loginAuth(){
//   return new Promise(function(resolve){
//       setTimeout(()=>{
//         resolve(true)
//         // reject(false);
//       },1000)
//   })
// }

// function loginAuth(){
//   return new Promise(function(resolve,reject){
//       setTimeout(()=>{
//         reject(false);
//       },1000)
//   })
// }


// router.beforeEach(function(to,from,next){
//   console.log("全局前置守卫:1");
//   console.log("from",from);
//   console.log("to",to);
//   next();
// })




// router.beforeEach(function(to,from,next){
//   console.log("全局前置守卫:2");
//   if(to.meta.isRequireAuth){ // 跳转到指定路由时需要验证
//       loginAuth().then(()=>{
//         next();
//       }).catch(()=>{
//         // next(err)  // 验证时出现错误
//         next({path:"/login"});  // 登录验证失败 => 去登录

//         // next(false);    // 权限验证 => 你没有此权限访问 
//         // alert("你在想啥呢?")
//       })

//   }else{ // 不需要验证
//     next();  
//   }

// })

export default router
